Use reactive declarations to compute component state in Svelte 3

• Svelte automatically updates the DOM when the component's state changes.

• If part of the state need to be computed from other parts we can use reactive declarations

• The syntax for a reactive declarations is $: in front of the variable name

  JS

  let count = 0
  $: squared = count ** 2

• You can also easily have reactive declarations based off other reactive declarations.

Loop over and render a list of data using an each block in Svelte 3

• You can iterate over lists of values with an each block
• This is the syntax for the each block

<ul>
  {#each items as item}
  <li>{item.name}</li>
  {/each}
</ul>

• You can use each blocks to iterate over any array or array-like value
• Svelte Documentation for each

  Previous      Next